/**
 * Created by lijinran on 2017.09.08.
 */
const Vue = require("vue");
let app = require('common');
let dialog = require("dialog");
let api = require("api");
let headImg = __uri("../../common/images/mrheadImg.png");
let rankingListClose = __uri("../../common/images/ranking-list-close.png");
let city=app.getValue('city','session'),
    mynickname=app.getValue('mynickname','session'),
    province=app.getValue('province','session'),
    appId=app.getValue('appId','session'),
    myheadImgUrl=app.getValue('myheadImgUrl','session'),
    userToken=app.getValue('userToken','local');
Vue.component('vue-rankinglist', { //注意大小写
    template: `<section v-cloak class="ranking-list-main" v-if="isShowrank">
                <div class="shade"></div>
                <div class="ranking-list-close" @click="closeRank"><img :src="rankingListClose" alt=""></div>
                <div class="ranking-list-content">
                    <div class="ranking-list-nav">
                        <span v-bind:class="{Checked:isClick}" @click="onrankFun" >排行榜</span>
                        <span v-bind:class="{Checked:!isClick}" @click="onruleFun">活动规则</span>
                        <div class="clearfix"></div>
                    </div>
                    <!--排行榜-->
                    <div class="phb-list-content" v-if="!isClick">
                        <div class="phb-list-title">
                            <img :src="headImg" alt="">
                            <div class="phb-title-text">
                                <p>{{decodeURI(mynickname)}}</p>
                                <p>验证烟包{{yzyb}}，当前排名：<span>{{paiming}}名</span></p>
                            </div>
                        </div>
                        <div class="phb-list">
                            <ul class="phb-list-hr"><li>排名</li><li>头像</li><li>昵称</li><li>验证烟包</li></ul>
                        </div>
                        <div class="phb-list phb-list-over">
                            <ul class="phb-list-hr" v-for='(el,index) in listArray'  v-if="listArray.length>0" >
                                <li>{{index+1}}</li>
                                <li class="phb-list-hd-img"><img :src="el.headImgUrl" alt=""></li>
                                <li>{{decodeURI(el.nickname)}}</li>
                                <li>{{el.checkNum}}</li>
                            </ul>
                            <div v-if="!listArray.length" style="text-align: center;padding-top: 5%;" >暂无排行榜数据！</div>
                        </div>
                        <div class="phb-list-footer">仅显示排名100名以内的数据</div>
                    </div>

                    <!--活动规则-->
                    <div class="activity-rules" v-if="isClick">
                        <section v-html="ruleHtml"></section>
                    </div>
                </div>
        </section>`,
    props: {
        isShowrank: {
            type: Boolean
        }
    },
    data() {
        return {
            isClick:false,
            headImg:myheadImgUrl||`static/${headImg}`,
            mynickname:mynickname,
            yzyb:0, //验证烟包
            paiming:'暂无排',
            rankingListClose:`static/${rankingListClose}`,
            listArray: [],
            ruleHtml:'<p></p>',
        };
    },
    created() {},
    mounted() {},
    watch: {
        isShowrank:function (n,o) {
            if(n){
                let $this=this;
                api.queryMarketRankList(userToken,city).done(function(date){  //排行榜
                    if(date.code==200){
                        if(date.data.rankList){ $this.listArray=date.data.rankList;}
                        if(date.data.marketRank){
                            $this.mynickname=date.data.marketRank.nickname||mynickname;
                            $this.headImg=date.data.marketRank.headImgUrl||myheadImgUrl;
                            $this.yzyb=date.data.marketRank.checkNum||0;
                        }else{
                            $this.mynickname=mynickname;
                            $this.headImg=myheadImgUrl;
                            $this.yzyb=0;
                        }
                        $this.paiming=date.data.rankNum||'暂无排';
                    } else {
                        date.msg&&dialog.tipDialog(date.msg);
                    }
                });
                api.getEffectiveActivity(appId,province,city).done(function(date){  //活动规则
                    if(date.code==200){
                        $this.ruleHtml=date.data.comment||"<p></p>";
                    } else {
                        $this.ruleHtml="<p>"+date.msg+"</p>";
                        //date.msg&&dialog.tipDialog(date.msg);
                    }
                })

            }
        }
    },
    methods: {
        onrankFun:function () {
            this.isClick=false;
        },
        onruleFun:function () {
            this.isClick=true;
        },
        closeRank:function () {
            this.$emit('onchange',false);
        },

    }
})


//<vue-rankinglist></vue-rankinglist>